<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Dispatcher Example - Dynamically Loading Content</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../assets/example.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/button/assets/button.css">
<!-- Some of the CSS used in the contents (will be deprecated in the next version of te dispatcher plugin) -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">
<!-- Javascript Framework -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src="../../../../yui-cms/build/bubbling/bubbling.js"></script>
<script type="text/javascript" src="../../../../yui-cms/build/dispatcher/dispatcher.js"></script>
<style type="text/css">
.boxing { 
	float: left; 
	width: 45%;
	border: 1px solid;
	margin: 1%;
	padding: 1%;
}
.footer, .header {
	diaplay: block;
	clear: both;
	padding: 2%;
	border: 1px solid;
}
.red { color: #FF0000; }
.menu {
	float: left;
	clear: both;
	width: 20%;
	padding: 1%;
	margin: 1% 0;
	border: 1px solid;
	background-color: #cccccc;
}
.content { 
	float: right; 
	width: 75%;
	border: 1px solid;
	margin: 1% 0;
	padding: 1%;
}

/* Datatable custom css*/
#basic {margin:1em;}
#basic table {border-collapse:collapse;}
#basic th, #basic td {border:1px solid #000;padding:.25em;}
#basic th {background-color:#696969;color:#fff;} /*dark gray*/
#basic .yui-dt-odd {background-color:#eee;} /*light gray*/
#basic em {font-style:italic;}
#basic strong {font-weight:bold;}
#basic .big {font-size:136%;}
#basic .small {font-size:77%}

</style>

<script type="text/javascript">
(function() {
	
var $B = YAHOO.CMS.Bubble,
    $E = YAHOO.util.Event,
    $D = YAHOO.util.Dom,
    $ =  YAHOO.util.Dom.get;

// default behavior: this method will be execute every time you click on the page...    
var dynamicNav = function (layer, args) {
  var e = args[0], 
      o = args[1] || {},
	  el = o.target || $E.getTarget(e) || null,
	  d = o.decrepitate || false;	  
  el = $B.getAncestorByTagName( el, 'A' );
  if (!d && el) {
	  var h = el.getAttribute("href"),
	  	  r = el.getAttribute("rel"),
	  	  t = el.getAttribute("target"),
		  l = new String(document.location);
  	  // checking if the href is not the current page or a jump anchor or a javascript function
  	  // checking if the rel or target attribute are defined...
	  if ((h && ((h.indexOf('#') === 0) || (h.indexOf('javascript:') === 0) || ((h.indexOf('#') > 0) && (l.indexOf(h) === 0)))) || 
	      (r == 'external') || (r == 'internal') || (t && t != '') || (h == '')) {
		return;
      }
	  dynamic_navigation (h);
      $B.eventGarbage(e);
	  o.decrepitate = true;
  }
};

// using the dispatcher to load the dynamic content
function dynamic_navigation ( url ) {
    var onFinish = function() {
			       $B.onRepaint();
			     };
	YAHOO.util.Dispatcher.fetch ( 'dynamic-area', url + '&tpl=ajax', {
	  	before: function() { 
			   }, 
		after: function() { 
			      $B.onRepaint();
			   }
	});
};

// initialization...
YAHOO.example.init = function() {
    // subscribing the default behavior
	$B.bubble.navigate.subscribe(dynamicNav);
};

YAHOO.example.init();

})();
</script>

</head>
<body id="tms-body">
<div id="doc">

  <div class="footer">
    <div class="path"> <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a> </div>
    <p><strong>Advanced EXAMPLE of the use of the Bubbling Core Object...</strong></p>
  </div>

    <h1>Dynamic Navigation Theory: Dispatcher + Bubbling Core Object = Dynamic Website</h1>
    <p>See how the left menu load the corresponding content in the central area of the page.<br>
    <span class="red">In this example the main of the page also include external components that will be loaded onDemand (ex. <a href="advanced.php?page=xhtml.with.datatable">Datatable</a> and <a href="advanced.php?page=xhtml.with.autonomous.tabview">Tabview</a>).  </span></p>
    <div class="menu">
		<h3>Main Menu</h3>
		<ul>
			<li><a href="advanced.php?page=index">Home</a></li>
			<li><a href="advanced.php?page=xhtml.with.datatable">Datatable</a></li>
			<li><a href="advanced.php?page=xhtml.with.autonomous.tabview">Tabview</a></li>
			<li><a href="advanced.php?page=simple">Simple Text</a></li>
			<li><a href="simple.php" target="_top">Simple Example</a> (external) </li>
		</ul>
	</div>
	
	<div class="content" id="dynamic-area">
		
		<?php
		    // loading the main content
		    require ( 'advanced/'. $uri.'.php' );
        ?>

	</div>
  
  <div class="footer">
  Footer here... <a href="http://bubbling.comarq.com/" target="_blank">Bubbling Library</a> | <a href="http://developer.yahoo.com/yui/" target="_blank">YUI Library</a> | <a href="http://www.yahoo.com/" target="_blank">Yahoo Home Page</a>  </div>

</div>

</body>
</html>
